const echarts = require("echarts");
import nameMap from "@/utils/mapWord.js";
import worldMap from "echarts/map/json/world";
require("echarts/lib/component/tooltip");

echarts.registerMap("world", worldMap);
export default {
  props: ["nodes", "range", 'needRange'],
  data() {
    return {
      options: {
        series: {
          name: "",
          type: "",
          data: []
        }
      }
    };
  },
  watch: {
    nodes(nodes) {
      if (nodes.length > 0) this.drawMap();
    }
  },
  methods: {
    drawMap() {
      let myMap = echarts.init(document.getElementById("myMap"));
      this.options = {
        // 进行相关配置
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.name && params.value) {
              return params.name + " " + params.value;
            }
          }
        },
        visualMap: {
          min: this.range.max,
          max: this.range.min,
          text: ["High", "Low"],
          show: this.needRange,
          realtime: false,
          calculable: false,
          color: ["#9770F5", "#B295FC", "#CFBAFF"]
        },
        nameMap: nameMap,
        series: [{
          name: "World Nodes Distribution",
          type: "map",
          map: "world",
          roam: true,
          itemStyle: {
            emphasis: {
              label: {
                show: false
              }
            },
            borderColor: "#fff",
            borderWidth: "2"
          },
          data: this.nodes
        }]
      };
      myMap.setOption(this.options);
    }
  }
};